<template>
  <view class="album-list">
    <view 
      class="album-item" 
      v-for="album in albums" 
      :key="album.albumId"
      @click="$emit('albumClick', album)"
    >
      <!-- 选择框 -->
      <view class="album-selection">
        <view 
          class="selection-circle" 
          :class="{
            'selected': isSelected(album),
            'edit-mode': isEditMode
          }"
          @click.stop="$emit('toggleSelection', album)"
        >
          <u-icon v-if="isSelected(album)" name="checkmark" size="14" color="#fff"></u-icon>
        </view>
      </view>
      
      <!-- 相册信息 -->
      <view class="album-content">
        <!-- 封面图 -->
        <view class="album-cover">
          <image 
            :src="album.coverUrl || '/static/default-album.png'" 
            mode="aspectFill"
          ></image>
        </view>
        
        <!-- 相册详情 -->
        <view class="album-details">
          <view class="album-title">
            <text class="album-name">{{ album.title }}</text>
            <text v-if="album.status === 0" class="privacy-tag">私密</text>
          </view>
          <view class="album-meta">
            <text class="photo-count">{{ album.photoCount }}张照片</text>
            <text class="create-time">{{ formatDate(album.createTime) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AlbumList',
  props: {
    albums: {
      type: Array,
      required: true
    },
    isEditMode: {
      type: Boolean,
      default: false
    },
    selectedAlbums: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    isSelected(album) {
      return this.selectedAlbums.some(item => item.albumId === album.albumId);
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr.replace(/-/g, '/'));
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    }
  }
}
</script>

<style scoped>
.album-list {
  padding: 10rpx 20rpx;
}

.album-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.album-selection {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  transition: all 0.3s;
}

.selection-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  opacity: 0;
  transform: scale(0.8);
}

.selection-circle.edit-mode {
  opacity: 1;
  transform: scale(1);
}

.selection-circle.selected {
  background-color: #3a8838;
  border-color: #3a8838;
  opacity: 1;
  transform: scale(1);
}

.album-content {
  flex: 1;
  display: flex;
  margin-left: 60rpx;
}

.album-cover {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.album-cover image {
  width: 100%;
  height: 100%;
}

.album-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.album-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.album-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.privacy-tag {
  background-color: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}

.album-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.photo-count {
  margin-right: 20rpx;
}

.create-time {
  color: #bbb;
}
</style> 